<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-03 21:46:21
 * @LastEditTime: 2019-10-18 11:48:46
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="scroll-box">
    <div
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="busy"
      infinite-scroll-distance="10"
      class="scroll-box-anli"
    >
      <div v-for="item,index in getList" :key="index" class="anli-box" :id="index">
        <div class="scroll-box-aside"><img :src="item.anli_imgUrl" /></div>
        <div class="scroll-box-contain">
          <div class="contain-title contain-box">
            <div>
              <span>名称：{{item.anli_Name}}</span>
              <span style="padding-left:10px;">制作：{{item.anli_Author}}</span>
            </div>
            <div class="contain-title-left">
              <Icon
                type="md-heart"
                size="16"
                class="contain-title-left-icon"
                :class="'icon'+index"
                :id="index"
                @click.native="myLove"
                color="rgb(255, 0, 0)"
                v-if="item.user"
              />
              <Icon
                type="md-heart"
                size="16"
                class="contain-title-left-icon"
                :class="'icon'+index"
                :id="index"
                @click.native="myLove"
                color="rgba(0, 0, 0,0.2)"
                v-if="!item.user"
              />
              <div class="contain-title-ctl">推荐热度:{{item.hot}}</div>
            </div>
          </div>
          <div class="contain-article contain-box">简介：{{item.anli_Jianjie}}</div>
          <div class="contain-link contain-box">
            <div>
              链接：
              <a :href="item.anli_Url" target="_blank">点击跳转</a>
              <span class="addtime">收录时间:2019-8-18</span>
              <span class="detail">查看详情</span>
              <span class="fedback">失效反馈</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <Loading v-if="isLoading" class="test"></Loading> -->
  </div>
</template>
<script>
import $ from "jquery";
import { setTimeout, clearTimeout } from "timers";
import Loading from "../../../../components/mo/anime/loading/loading";
import { promises } from "fs";
export default {
  name: "Scroll",
  data() {
    return {
      count: 0,
      data: [],
      busy: false,
      isLoading: true,
      scrollImgList: []
    };
  },
  mounted() {
    this.$axios
      .get(this.$store.getters.url + "/getAnli?userId=" + localStorage.getItem('loginfo2'))
      .then(res => {
        this.scrollImgList = res.data.data;
        console.log(this.scrollImgList);
      });
  },
  computed: {
    getList() {
      return this.scrollImgList;
    }
  },
  methods: {
    //加载
    loadMore: function() {
      //加载更多数据
      this.busy = true;
      let co = this.scrollImgList.length - this.count - 1;
      if (co >= 3) {
        this.isLoading = true;
        setTimeout(() => {
          this.isLoading = false;
          for (let i = 0, j = 3; i < j; i++) {
            this.data.push(this.scrollImgList[this.count]);
            this.count++;
          }
          this.busy = false;
        }, 100);
      } else if (co > 0 && co < 3) {
        this.isLoading = true;
        setTimeout(() => {
          this.isLoading = false;
          for (let i = 0, j = co; i < j; i++) {
            this.data.push(this.scrollImgList[this.count]);
            this.count++;
          }
          this.busy = false;
        }, 100);
      } else {
        this.isLoading = false;
      }
    },
    //收藏
    myLove: function(e) {
      // if ($(".icon" + e.target.id).css("color") != "rgb(255, 0, 0)") {
      $(".icon" + e.target.id).css("color", "rgb(255, 0, 0)");
      // } else {
      //   $(".icon" + e.target.id).css("color", "rgba(0, 0, 0,0.2)");
      // }
      this.$axios
        .get(this.$store.getters.url + "/loveAnli", {
          params: {
            userId: localStorage.getItem('loginfo2'),
            anli_Id: parseInt(e.target.id) + 1
          }
        })
        .then(res => {
          this.$Message.success(res.data.msg);
        });
    }
  },
  components: {
    Loading: Loading
  }
};
</script>
<style lang="scss" scoped>
$hoverColor: rgb(221, 221, 221);
.test {
  height: 40px;
}
.scroll-box {
  position: relative;
  width: 100%;
  height:600px;
  padding-bottom: 20px;
  overflow: auto;
  overflow-x: hidden;
      background-color: white;
  &::-webkit-scrollbar {
    background-color: white;
    width: 4px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: rgb(161, 161, 161);
  }
}
.scroll-box-anli {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}
.anli-box {
  display: flex;
  width: 98%;
  height: 80px;
  box-sizing: border-box;
  //   border: 1px solid $hoverColor;
  margin-top: 10px;
  box-shadow: 0 0px 2px rgb(212, 212, 212);
  // animation: showAnli 0.4s ease-in-out;
  // animation-fill-mode: forwards;
  // cursor: pointer;
  opacity: 0;
  &:hover {
    box-shadow: 0 0px 2px rgb(124, 124, 124);
  }
}
.scroll-box-aside {
  display: flex;
  width: 80px;
  height: 80px;
  // background: url('../../../assets/img/hezhimeng.jpg');
  box-sizing: border-box;
  border-right: 1px solid rgb(212, 212, 212);
  justify-content: center;
  align-items: center;
  font-size: 40px;
  img{
    width: 100%;
    height: 100%;
  }
}
.scroll-box-contain {
  display: flex;
  width: 80%;
  height: 80px;
  // background-color: rgb(197, 197, 197);
  flex: 1;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  .fedback,
  .addtime,
  .detail {
    color: #ccc;
    cursor: pointer;
    padding-left: 10px;
    &:hover {
      color: black;
    }
  }
  .contain-title-ctl {
    padding-right: 10px;
  }
  .contain-title-left {
    display: flex;
    align-items: center;
    .contain-title-left-icon {
      margin-right: 5px;
      cursor: pointer;
    }
  }
}
.contain-box {
  display: flex;
  width: 100%;
  height: 25px;
  align-items: center;
  padding-left: 10px;
  justify-content: space-between;
}
@mixin item($num) {
  $waitTime: ($num) * 0.2-0.2;
  animation: showAnli 0.2s ease-in-out #{$waitTime}s;
  animation-fill-mode: forwards;
}
@for $i from 1 through 50 {
  .anli-box:nth-child(#{$i}) {
    @include item($i);
  }
}
@keyframes showAnli {
  0% {
    opacity: 0;
    // transform: translate3d(100%, 0, 0);
  }
  100% {
    opacity: 1;
    // transform: translate3d(0, 0, 0);
  }
}
</style>